<template>
  <view class="_list">
    <view class='_list-item'>
      <view class="main">
        <view class="left">
          <view class="logo"></view>
        </view>
        <view class="right">
          <view class="title"></view>
          <view class="desc"></view>
          <view class="footer">
            <view class="footer-l">
              <view class="dis"></view>
              <view class="price"></view>
            </view>
            <view class="footer-r">
              <view class="num"></view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class='_list-item'>
      <view class="main">
        <view class="left">
          <view class="logo"></view>
        </view>
        <view class="right">
          <view class="title"></view>
          <view class="desc"></view>
          <view class="footer">
            <view class="footer-l">
              <view class="dis"></view>
              <view class="price"></view>
            </view>
            <view class="footer-r">
              <view class="num"></view>
            </view>
          </view>
        </view>
      </view>
    </view>
    
  </view>
</template>
<style lang="scss" scoped>
 ._list {
  ._list-item {
    width: 500upx;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 36upx;
    border-radius: 23upx;
    background: #fff;
    box-sizing: border-box;
    .main {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30upx 0;
      box-sizing: border-box;
      width: 100%;
      .left {
       .logo {
        width: 160upx;
        height: 160upx;
        border-radius: 10upx;
        background-color: #f5f5f5;
       }
      }
      .right {
        flex: 1;
        margin-left: 20upx;
        .footer {
          display: flex;
          justify-content: space-between;
          .footer-r {
            margin-left: 20upx;
          }
        }
        .title {
          height: 34upx;
          width: 200upx;
          border-radius: 8upx;
          background-color: #f5f5f5;
        }
        .desc {
          height: 24upx;
          width: 200upx;
          margin-top: 4upx;
          border-radius: 8upx;
          background-color: #f5f5f5;
        }
        .dis {
          height: 34upx;
          width: 200upx;
          margin-top: 4upx;
          border-radius: 8upx;
          padding: 2upx 16upx;
          height: 28upx;
          width: 100upx;
          background-color: #f5f5f5;
        }
        .price {
          width: 200upx;
          margin-top: 4upx;
          border-radius: 8upx;
          height: 28upx;
          background-color: #f5f5f5;
        }
        .num {
          width: 200upx;
          margin-top: 4upx;
          border-radius: 8upx;
          height: 40upx;
          background-color: #f5f5f5;
        }
      }
      
    }
  }
 } 
</style>